<template>
  <el-dialog
    width="630px"
    title="补货详情"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    v-model="visible"
    append-to-body
    @close="cancel"
    @open="open"
  >
    <el-scrollbar
      class="scrollbar"
      style="height: 330px;"
    >
      <el-table
        style="width: 552px;margin: 0 auto;"
        :data="detailData"
        :header-cell-style="{'line-height': '1.15', 'padding': '10px 0 9px', 'background': '#F3F6FB', 'font-weight': '500', 'text-align': 'left', 'color': '#666666'}"
        :cell-style="{'height': '44px', 'padding': '2px 0', 'text-align': 'left', 'color': '#666666'}"
      >
        <el-table-column label="货道编号">
          <template #default="scope">
            {{ scope.row.channelCode }}
          </template>
        </el-table-column>

        <el-table-column label="商品">
          <template #default="scope">
            {{ scope.row.skuName?scope.row.skuName:'--' }}
          </template>
        </el-table-column>

        <el-table-column label="补货数量">
          <template #default="scope">
            {{ scope.row.expectCapacity }}
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </el-dialog>
</template>

<script>
export default {
  name: 'Task',
  props: {
    // 详情弹层显示隐藏
    listVisible: {
      type: Boolean,
      default: false
    },
    // 获取货道列表
    detailData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false
    };
  },
  watch: {
    listVisible(val) {
      if (val) {
        this.visible = val;
      }
    }
  },
  methods: {
    // 关闭 弹层
    cancel() {
      this.visible = false;
      this.$emit('handleClose');
    }
  }
};
</script>
